.attitude-indicator{
    height: 100%;
    width: 100%;
    border-radius: 50%;
    // background:red;
    z-index: 10;
    position: relative;
    #calibration{
        transform-origin: 50% 50%;
        transform: all 0.3s;
    }
    .pointer{
        position: absolute;
        top:15px;
        left:50%;
        transform: translate(-50%);
        border: 10px solid transparent;
        border-bottom-color: red;
    }
    .disc{
        position: absolute;
        top:50%;
        left: 50%;
        height: 75%;
        width: 75%;
        border-radius: 50%;
        z-index: -1;
        overflow: hidden;
        transform-origin: 50% 50%;
        transition: all 0.3s;
        .rolling{
            width: 100%;
            position: absolute;
            top:50%;
            left: 50%;
            z-index:13;
            transform-origin: 50% 0;
        }
        .pitching{
            height: 400%;
            width: 100%;
            position:absolute;
            top:50%;
            left:50%;
            z-index:12;
            overflow: hidden;
            transition: all 0.3s;

            .sky,.land{
                height: 50%;
                width:100%;
            }
            .sky{
                position: relative;
                background: linear-gradient(0deg, #5979ED 1%, #1A42D3 100%);
            }
            .land{
                position: relative;
               background:  linear-gradient(0deg, #14801C 0%, #4AEAA1 100%);
            }
            .short,.long{
                position: absolute;
                width:80px;
                left:50%;
                top:0;
                display: flex;
                justify-content: center;
                
                .number{
                    position:absolute;
                    top:50%;
                    left:-10px;
                    transform: translateY(-50%) scale(0.8);
                    color:#fff;
                    font-size:12px;
                }
                .striping{
                    height:1px;
                    width: 30px;
                    background:#fff;
                }
            }
            .long .striping{
                width: 50px;
            }
        }
    }
}